<template>
    <view class="content content-bottom">
        <!-- 顶部 -->
        <view class="header">
           
           <view class="header-info">
                <view class="header-info-title">可提现收益 (元)</view>
                <view class="heder-info-num">{{member.money}}</view>
           </view>
          <view class="header-info-two">
                <view class="header-info-title">现金收益（元）</view>
                <view class="heder-info-num">{{member.cash_income}}</view>
           </view>
          <view class="header-info-three">
                <view class="header-info-title">累积收益（元）</view>
                <view class="heder-info-num">{{member.leiji_income}}</view>
           </view>
           <view class="goWithdrawal" @click="to_tixian">
               去提现 >
           </view>
        </view>
        
        <view class="top">
            <view :class="chooseType == 'jfsy' ?'top-tab-active':''" class="top-tab" @click="qiehuan('jfsy')">
                积分收益
                <view v-if="chooseType == 'jfsy'" class="top-tab-active-btm"></view>
            </view>
            <view :class="chooseType == 'xjsy' ?'top-tab-active':''" class="top-tab" @click="qiehuan('xjsy')">
                现金收益
                <view v-if="chooseType == 'xjsy'" class="top-tab-active-btm"></view>
            </view>
        </view>
        
        <view class="box">
            <view class="list" v-for="item in list">
                <view class="list-left">
                    <view class="list-left-top">{{item.title}}</view>
                    <view class="list-left-bottom">{{item._update_time}}</view>
                </view>
                <view class="list-right">
					<text v-if="item.bill_type==1">+{{item.number}}</text>
					<text v-if="item.bill_type==0" style="color: #07C160;">-{{item.number}}</text>
                </view>
            </view>
        </view>
        
       <!-- <uni-list :border="false">
             <uni-list-item class="list" :border="false" title="积分兑换奖金"  note="wqdqw" rightText="123"></uni-list-item>
            
         </uni-list> -->
       
        
   
        
        
        
    </view>
</template>
<script>
export default {
    data() {
        return {
            chooseType:'jfsy',
			member:[],
			formData:{
				page:1,
				limit:10,
				category:0
			},
			list:[]
        }
    },
	onShow() {
		this.get_member();
		this.list=[]
		this.get_list();
	},
	onReachBottom(){
	  this.formData.page=this.formData.page+1;
		  this.get_list();
	},
    methods: {
        qiehuan(type) {
            this.chooseType = type;
			this.list=[];
			if(type=="xjsy"){
				this.formData.category=1;
				this.formData.page=1;
				this.get_list();
			}else{
				this.formData.category=0;
				this.formData.page=1;
				this.get_list();
			}
        },
		//获取用户信息
		get_member()
		{
			var data={
				
			}
			var _this=this;
			_this.$api.doRequest("post","api/userinfo",data).then(res=>{
				console.log(res.data.data)
				_this.member=res.data.data
			})
		},
		get_list()
		{
			var data=this.formData;
			var _this=this;
			var list=this.list
			_this.$api.doRequest("post","api/my_bill",data).then(res=>{
				list=list.concat(res.data.data.list);
				_this.list=list;
			})
		},
		to_tixian(){
			uni.navigateTo({
				url:"/pages/my/tixian"
			})
		}
    },
}
</script>

<style>
.content {
    width: 750upx;
    height: 100vh;
    background-color: #F8F8F8;
}
.header {
    width:750upx;
    height:578upx;
    background-image: url(https://mes.renkangshangcheng.cn/appimage/topbgm.png);
    background-repeat: no-repeat;  
    background-size: 100% 100%;
    position: relative;
}
.header-info {
    position: absolute;
    color:#fff;
    left:20upx;
    top:190upx;
}
.header-info-title {
    font-size: 28upx;
}
.heder-info-num {
    font-size: 64upx;
    font-family: DINPro-Bold, DINPro;
    font-weight: bold;
}

.header-info-two {
    position: absolute;
    color:#fff;
    left:20upx;
    top:368upx;
}
.header-info-three {
    position: absolute;
    color:#fff;
    left:408upx;
    top:368upx;
}
.goWithdrawal {
    position: absolute;
    right: 0;
    top: 228upx;
    width: 188upx;
    height: 56upx;
    line-height: 56upx;
    color: #fff;
    text-align: center;
    background-color: #000;
    opacity: 0.3;
    border-radius: 30upx 0 0  30upx;
}
.top {
    width: 750upx;
    height: 88upx;
    display: flex;
    background-color: #fff;
    margin-top: 20upx;
    margin-bottom: 20upx;
}
.top-tab {
    flex: 1;
    text-align: center;
    line-height: 88upx;
    color:#666666;
}
.top-tab-active {
    color:#FF4336;
}
.top-tab-active-btm {
    width: 30upx;
    height: 3upx;
    margin: 0 auto;
    background-color: red;
}

.box {
    width: 750upx;
    background-color: #fff;
}
.list {
    width: 710upx;
    height: 134upx;
    margin: 0 auto;
    display: flex;
    border-bottom: 1px solid #E5E5E5;
}
.list-left {
    flex: 4;
}
.list-left-top {
    margin-top: 24upx;
    color:#666;
    font-size: 28upx;
}
.list-left-bottom {
    margin-top:8upx;
    color:#999;
    font-size: 24upx;
}
.list-right {
    flex: 1;
    line-height: 134upx;
    text-align: right;
    font-size: 28upx;
    font-weight: 500;
    color:#FA6400;
}
.list-right-color {
    color:#07C160;
}

</style>